<canvas id="myCanvas" width="400" height="350"></canvas>
<script>
function drawArrow(ctx, fromx, fromy, tox, toy) {
    const headlen = 10; // length of head in pixels
    const dx = tox - fromx;
    const dy = toy - fromy;
    const angle = Math.atan2(dy, dx);
    ctx.moveTo(fromx, fromy);
    ctx.lineTo(tox, toy);
    ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
    ctx.moveTo(tox, toy);
    ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
}

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// White background
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.save();
// Center the coordinate system
ctx.translate(200, 180);

ctx.strokeStyle = 'black';
ctx.lineWidth = 3;
ctx.fillStyle = 'black';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

// --- Draw Axes ---
ctx.font = 'italic 24px serif';
ctx.beginPath();
// z-axis
drawArrow(ctx, 0, 0, 0, -120);
ctx.fillText('z', 15, -125);
// y-axis
drawArrow(ctx, 0, 0, 140, 0);
ctx.fillText('y', 150, 12);
// x-axis
const x_end_x = -90;
const x_end_y = 70;
drawArrow(ctx, 0, 0, x_end_x, x_end_y);
ctx.fillText('x', x_end_x - 15, x_end_y + 5);
ctx.stroke();

// --- Draw the Ring (ellipse) ---
const rX = 120;
const rY = 45;
ctx.beginPath();
ctx.ellipse(0, 0, rX, rY, 0, 0, 2 * Math.PI);
ctx.stroke();

// --- Draw the Angle theta representation ---
// Line along y-axis
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(rX, 0);
ctx.stroke();

// Line at an angle in the +x, +y quadrant
const theta_angle_deg = 25;
const theta_angle_rad = theta_angle_deg * Math.PI / 180;
const theta_line_x = rX * Math.cos(theta_angle_rad);
const theta_line_y = rY * Math.sin(theta_angle_rad);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(theta_line_x, theta_line_y);
ctx.stroke();

// Angle arc for theta
const arc_radius_theta = 50;
ctx.beginPath();
ctx.arc(0, 0, arc_radius_theta, 0, theta_angle_rad);
ctx.stroke();

// Label theta
const label_theta_angle = theta_angle_rad / 2;
ctx.fillText('θ', 40 * Math.cos(label_theta_angle), 40 * Math.sin(label_theta_angle) + 3);


// --- Draw the Radius R representation ---
// Line in the -x, +y quadrant (upper right)
const R_angle_deg = -35;
const R_angle_rad = R_angle_deg * Math.PI / 180;
const R_line_x = rX * Math.cos(R_angle_rad);
const R_line_y = rY * Math.sin(R_angle_rad);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(R_line_x, R_line_y);
ctx.stroke();

// Label R
ctx.fillText('R', R_line_x * 0.65, R_line_y * 1.5);

// --- Draw the figure caption ---
ctx.restore();
ctx.font = '20px serif';
ctx.fillStyle = 'black';
ctx.textAlign = 'center';
ctx.fillText('Fig. 4.7', 200, 330);

</script>